<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/内嵌视频.css" />
  </head>

  <body>
    <div>
      <span class="name">【CET-6】大学英语六级语法</span><br />
      <span class="year">2017-09-26</span>
      <iframe
        src="https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122916&p=1"
        ,
        height="100%"
        width="100%"
        scrolling="no"
        allowfullscreen="true"
        frameborder="no"
        allowtransparency="yes"
      ></iframe>
      <div class="xuanji">
        <div class="xuanzhong">第一集</div>
        <div>第二集</div>
        <div>第三集</div>
        <div>第四集</div>
        <div>第五集</div>
        <div>第六集</div>
        <div>第七集</div>
        <div>第八集</div>
      </div>

      <script>
        let xuanji = [
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122916&p=1",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122912&p=2",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122917&p=3",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122915&p=4",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122920&p=5",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122914&p=6",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122923&p=7",
          "https://player.bilibili.com/player.html?isOutside=true&aid=14802754&bvid=BV1qx411G7PD&cid=24122919&p=8",
        ];

        let bofang = document.querySelector("iframe");
        let dizhi;
        for (i = 0; i < xuanji.length; i++) {
          let index = i;
          document
            .querySelector(`.xuanji>div:nth-child(${i + 1})`)
            .addEventListener("click", function () {
              bofang.src = xuanji[index];
              document
                .querySelector(".xuanzhong")
                .classList.remove("xuanzhong");
              this.classList.add("xuanzhong");
            });
        }
      </script>
    </div>
  </body>
</html>
